<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>A tiny, opensource, Bootstrap WYSIWYG rich text editor</title>
	<meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
	<meta name="description"
		content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />
	<link href="https://cdn.bootcdn.net/ajax/libs/prettify/188.0.0/lang-css.js" />
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
	<link href="./bootstrap-wysiwyg-1.0.4/css/style.css" rel="stylesheet" />
    <style>
        .submitBtn{
            width: 200px;
            height: 50px;
            margin-top: 20px;
            background: gray;
            color: white;
            border-radius: 10px;
            outline: none;
        }
    </style>
</head>

<body>
	<div class="container">
		<h1>文章编辑</h1>
		<input type="text" placeholder="请输入标题" id="title">
		<input type="text" placeholder="请输入标签,用逗号隔开" id="tags">
		<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font"><i
						class="fa fa-font"></i><b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				</ul>
			</div>
			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
						class="fa fa-text-height"></i>&nbsp;<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a data-edit="fontSize 5" class="fs-Five">Huge</a></li>
					<li><a data-edit="fontSize 3" class="fs-Three">Normal</a></li>
					<li><a data-edit="fontSize 1" class="fs-One">Small</a></li>
				</ul>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
				<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i
						class="fa fa-italic"></i></a>
				<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i
						class="fa fa-strikethrough"></i></a>
				<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
						class="fa fa-underline"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i
						class="fa fa-list-ul"></i></a>
				<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i
						class="fa fa-list-ol"></i></a>
				<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
						class="fa fa-outdent"></i></a>
				<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i
						class="fa fa-align-left"></i></a>
				<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
						class="fa fa-align-center"></i></a>
				<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i
						class="fa fa-align-right"></i></a>
				<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
						class="fa fa-align-justify"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i
						class="fa fa-link"></i></a>
				<div class="dropdown-menu input-append">
					<input placeholder="URL" type="text" data-edit="createLink" />
					<button class="btn" type="button">Add</button>
				</div>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-unlink"></i></a>
				<span class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"> <i
						class="fa fa-picture-o"></i>
					<input class="imgUpload" type="file" data-role="magic-overlay" data-target="#pictureBtn"
						data-edit="insertImage" />
				</span>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
				<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
			</div>
			<input class="pull-right" type="text" data-edit="inserttext" id="voiceBtn" />
		</div>
		<div id="editor" class="lead" data-placeholder="Go ahead&hellip;"></div>
		<button onclick="submit()" class="submitBtn">提交</button>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery.hotkeys/0.1.0/jquery.hotkeys.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/prettify/188.0.0/prettify.js"></script>
	<script src="./bootstrap-wysiwyg-1.0.4/js/bootstrap-wysiwyg.min.js"></script>
	<script>
		$(function () {
			function initToolbarBootstrapBindings() {
				var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
					'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
					'Times New Roman', 'Verdana'],
					fontTarget = $('[title=Font]').siblings('.dropdown-menu');

				$.each(fonts, function (idx, fontName) {
					fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
				});

				$('a[title]').tooltip({ container: 'body' });

				$('.dropdown-menu input').click(function () { return false; })
					.change(function () {
						$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
					}).keydown('esc', function () {
						this.value = ''; $(this).change();
					});

				$('[data-role=magic-overlay]').each(function () {
					var overlay = $(this), target = $(overlay.data('target'));
					overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
				});

				if ("onwebkitspeechchange" in document.createElement("input")) {
					var editorOffset = $('#editor').offset();
					//$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
				}

				else {
					$('#voiceBtn').hide();
				}
			};

			function showErrorAlert(reason, detail) {
				var msg = '';
				if (reason === 'unsupported-file-type') {
					msg = "Unsupported format " + detail;
				}
				else {
					console.log("error uploading file", reason, detail);
				}

				$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
					'<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
			};

			initToolbarBootstrapBindings();

			$('#editor').wysiwyg({ fileUploadError: showErrorAlert });

			window.prettyPrint && prettyPrint();
		});
	</script>
	<script>
		function submit() {
            alert("提交");
            const content = $('#editor').html();
            const title = $('#title')[0].value;
			const tags = $('#tags')[0].value;
			const date = new Date();
			$.ajax({
				url: '/editBlog',
				method: 'post',
				data: {
					title: title,
					content,
					views: 0,//点击数
					tags: tags,//标签
					date: `${date.getFullYear()}-${date.getHours() + 1}-${date.getDate()}`,
					ctime: parseInt(Date.now() / 1000),
					utime: parseInt(Date.now() / 1000),
					link: ""
				},
				success: resp => {
					console.log(resp)
					$('#editor').html("");
				},
				error: resp => {
					console.log(resp);
				}
			})
		}
    </script>


</body>

</html>